<template>
  <view class="reviews-container">
    <view class="reviews-header">
      <text class="title">商品评价</text>
      <text class="count" v-if="total">{{ total }}条评价</text>
    </view>
    
    <scroll-view 
      class="reviews-list" 
      scroll-y
      @scrolltolower="onScrollToLower"
    >
      <view 
        v-for="review in reviews" 
        :key="review.id" 
        class="review-item"
      >
        <!-- 用户信息 -->
        <view class="user-info">
          <image 
            :src="review.userAvatar || '/static/profile/defaultAvatar.png'" 
            class="avatar"
            mode="aspectFill"
          />
          <view class="user-detail">
            <text class="username">{{ maskUsername(review.userName) }}</text>
            <text class="time">{{ formatTime(review.createTime) }}</text>
          </view>
          <view class="rating">
            <text 
              v-for="index in 5" 
              :key="index"
              class="star"
              :class="{ active: index <= (review.rating || 0) }"
            >★</text>
          </view>
        </view>

        <!-- 评论内容 -->
        <view class="review-content">
          <text class="content">{{ review.content }}</text>
          <text class="sku-info" v-if="review.skuName">{{ review.skuName }}</text>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="load-more" v-if="reviews.length > 0">
        <text class="load-text" v-if="hasMore">上拉加载更多</text>
        <text class="load-text" v-else>没有更多评价了</text>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="reviews.length === 0">
        <text class="empty-text">暂无评价</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import type { API } from '@/backend/typings';

// 定义组件属性
const props = defineProps<{
  reviews: API.ProductReviewVO[];
  total?: number;
  hasMore?: boolean;
}>();

// 定义事件
const emit = defineEmits(['load-more']);

// 触底加载更多
const onScrollToLower = () => {
  emit('load-more');
};

// 用户名脱敏处理
const maskUsername = (name?: string) => {
  if (!name) return '匿名用户';
  if (name.length <= 2) return name[0] + '*';
  return name[0] + '*'.repeat(name.length - 2) + name[name.length - 1];
};

// 格式化时间
const formatTime = (time?: string) => {
  if (!time) return '';
  const date = new Date(time);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  
  // 小于24小时显示"x小时前"
  if (diff < 24 * 60 * 60 * 1000) {
    const hours = Math.floor(diff / (60 * 60 * 1000));
    return hours === 0 ? '刚刚' : `${hours}小时前`;
  }
  
  // 小于7天显示"x天前"
  if (diff < 7 * 24 * 60 * 60 * 1000) {
    const days = Math.floor(diff / (24 * 60 * 60 * 1000));
    return `${days}天前`;
  }
  
  // 其他显示具体日期
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};
</script>

<style scoped>
.reviews-container {
  background: #fff;
  padding: 24rpx;
}

.reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.count {
  font-size: 26rpx;
  color: #999;
}

.reviews-list {
  max-height: 800rpx;
}

.review-item {
  padding: 24rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
}

.review-item:last-child {
  border-bottom: none;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  background: #f5f5f5;
}

.user-detail {
  flex: 1;
}

.username {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 4rpx;
  display: block;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.rating {
  display: flex;
  gap: 4rpx;
}

.star {
  font-size: 24rpx;
  color: #ddd;
}

.star.active {
  color: #ff9800;
}

.review-content {
  padding-left: 80rpx;
}

.content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 12rpx;
  display: block;
}

.sku-info {
  font-size: 24rpx;
  color: #999;
  padding: 4rpx 12rpx;
  background: #f8f8f8;
  border-radius: 4rpx;
  display: inline-block;
}

.load-more {
  text-align: center;
  padding: 24rpx 0;
}

.load-text {
  font-size: 26rpx;
  color: #999;
}

.empty-state {
  padding: 48rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style> 